<template>
  <div class="login1">
  <div  id="login" >
    <label>用户名</label>
    <el-input id="username" v-model="username" placeholder="请输入内容"></el-input>

    <label>密码</label>
    <el-input id="passwd" v-model="passwd" placeholder="请输入密码" show-password></el-input>

    <el-button type="danger" @click="login">登录</el-button>


    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>{{msg}}</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>

  </div>
  </div>

</template>

<script>
export default {
    data(){
        return  {
            username:"",
            passwd:"",
            dialogVisible:false,
            msg:""
        }
    },
    methods:{
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
      ,
        login(){
            console.log(this.username);
            console.log(this.passwd);
            //数据校验
            //校验通过，发送登录请求
            this.axios.get("/user/loginVue",{
                params:{
                    username:this.username,
                    password:this.passwd
                }
            }).then(resp=>{
                console.log(resp.data);

                const  r=resp.data;

                this.dialogVisible=true

                if(r.data===11){
                    this.msg="登录成功"

                    //记录登录状态  全局：vuex，  sessionStorage，localStorage
                    sessionStorage.setItem("uid","3");
                    sessionStorage.setItem("username","1006")
                    //跳转管理员操作界面
                    this.$router.replace("/indexAdmin")
                }else if (r.data===21){
                  this.msg="登录成功"

                  //记录登录状态  全局：vuex，  sessionStorage，localStorage
                  sessionStorage.setItem("uid","3");
                  sessionStorage.setItem("username","1006")
                  //跳转管理员操作界面
                  this.$router.replace("/index")
                }else{
                    if(r.data===0 || r.data===30){
                        this.msg="登录失败，用户不存在"
                    }else{
                        this.msg="登录失败，密码错误"
                    }
                }
                
            }).catch(err=>{
                console.log(err);
            })
            
        }
    }
}
</script>

<style scoped>
    #login{
        width: 30%;
        margin: auto;
        text-align: left;
        padding: 20px;
      background-color: skyblue;
    }
  .login1{
    padding: 20% 0;
    height: 100%;
    width: 100%;
    opacity: 1;
    background-image: url("../image/zhuanye.png");
  }
</style>